<template>
	<view class="main">
		<view class="main_box">
			<view class="main_con">
				<view class="main_con_banner">
					<image class="banner" src="../../static/img/banner.png" />
				</view>

				<view class="main_gongge">
					<van-notice-bar scrollable :speed="60" text="通知公告" color="#fff" background="#114b37" />

					<view class="nav_wrapper">
						<view v-for="(item, index) in gridList" :key="index" class="nav_item" @click="btnRoute(item)">
							<van-row class="title"> {{ item.title }}</van-row>
							<view class="icon">
								<image class="img" :src="item.icon"></image>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import bannerImg from "../../static/img/banner.png";
	import VIcon from "@/components/VIcon.vue";
	export default {
		components: {
			VIcon,
		},
		data() {
			return {
				userinfo: uni.getStorageSync('user'),
				title: "综合信息平台",
				gridList: [{
						title: "网评任务",
						icon: "../../static/icon/task.png",
						linkUrl: "/pages/task/task",
					},
					{
						title: "稿件上报",
						icon: "../../static/icon/wendang.png",
						linkUrl: "/pages/articleList/articleList",
					},
					{
						title: "位置信息",
						icon: "../../static/icon/weizhi.png",
						linkUrl: "/pages/place/place",
					},
					{
						title: "网上云盘",
						icon: "../../static/icon/wangpan.png",
						linkUrl: "/pages/cloudStorage/cloudStorage",
					},
					{
						title: "其它",
						icon: "../../static/icon/other.png",
						linkUrl: "/pages/other/other",
					},
				],
			};
		},
		onLoad() {
			console.log('on load index')
		},
		methods: {
			btnRoute(item) {
				uni.navigateTo({
					url: item.linkUrl
				})
			},
		},
	};
</script>

<style scoped>
	.van-grid-item__icon {
		font-size: 50px;
	}

	.main_box {
		width: 100%;
		height: 100%;
		background-color: #f2f2f2;
		position: absolute;
	}

	.main_con {
		height: 100%;
	}

	.main_con_banner {
		height: 400rpx;
		overflow: hidden;
	}

	.main_con_banner .banner {
		width: 750rpx;
	}

	.main_gongge {
		width: 100%;
		height: calc(100% - 400rpx);
		overflow: hidden;
		background-color: rgba(255, 255, 255, 0.8);
		background-size: cover;
		border-radius: 10px 10px 0 0;
		/* background-image: url("@/assets/img/bg_home.jpg"); */
	}

	.nav_wrapper {
		width: 100%;
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
	}

	.nav_item {
		width: 330rpx;
		height: 180rpx;
		margin: 30rpx 20rpx 0 0;
		display: flex;
		justify-content: center;
		background-color: #114b37;
		border-radius: 20rpx;
		color: #fff;
	}

	.nav_item .icon {
		width: 115rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.nav_item .img {
		width: 100rpx;
		height: 100rpx;
	}

	.nav_item .title {
		padding-left: 20rpx;
		padding-top: 20rpx;
		display: flex;
		width: 50%;
		margin-top: 10rpx;
		font-size: 18px;
	}
</style>
